<template>
	<view class="content">
		<up-grid :border="false" col="4" class="bg_color_fff pad-30">
			<up-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="hanldeTab(listItem.url)"> 
				<image class="image" :src="listItem.image" mode=""></image>
				<text class="grid-text font-26">{{listItem.title}}</text>
			</up-grid-item>
		</up-grid>
	 
		<view class="list-box bg_color_fff mar-top-30">
			<view class="betweenX pad-30 ">
				<view>正在进行的培训</view>
				<view>更多</view>
			</view>
			<view class="list-box">
				<view class="list pad-30" v-for="(item,index) in infoList" :key="index">
					<view class="flex">
						<view>
							<image class="image" :src="baseUrl + item.avatar"></image>
						</view>
						<view class="mar-left-20 flex-w list-right">
							<view>
								<view class="font-32">{{item.title}}</view>
								<view class="font-24 mar-top-10 color-black">{{item.create_time}}</view>
							</view>
							<view class="button-box betweenX">
								<view class="font-26 mar-top-20">
									<text v-if="false">已看：{{item.progress.progress}}</text>
								</view>
								<view @click="hanldeAnswer(item.id)" class="button radius20 font-24">进入培训</view>
							</view>
						</view>
					</view>
					<up-line margin="30rpx 0 0 0"></up-line>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	
	// 接口引入
	import {
		videoList
	} from '/config/api.js';
	
	import {
		onLoad
	} from '@dcloudio/uni-app'
	
	import {
		baseUrl
	} from '@/common/config.js'
	
	// 创建响应式数据  
	const list = reactive([{
			image: '../../static/image/hometest.png',
			title: '考试',
			url:'/pages/exam/exam'
		},
		{
			image: '../../static/image/homecourse.png',
			title: '培训',
			url:'/pages/video/video'
		},
		{
			image: '../../static/image/homelive.png',
			title: '消息',
			url:'/pages/msgList/msgList'
		},
		{
			image: '../../static/image/homepratice.png',
			title: '考试成绩',
			url:'/pages/achie/achie'
		},
		// {
		// 	image: '../../static/image/homeenroll.png',
		// 	title: '线下培训'
		// },
		// {
		// 	image: '../../static/image/homecertificate.png',
		// 	title: '证书'
		// },
		// {
		// 	image: '../../static/image/homefile.png',
		// 	title: '知识库'
		// },
		// {
		// 	image: '../../static/image/homequestionnaire.png',
		// 	title: '问卷'
		// },
	]);
	
	const hanldeTab = (url) =>{
		uni.navigateTo({
			url
		})
	}
	
	// 列表数据
	const infoList = ref([]);
	const getPageList = () => {
		videoList().then(res => {
			infoList.value = res.data.data;
		})
	}
	
	const hanldeAnswer = (id) => {
		uni.navigateTo({
			url: '/pages/videoInfo/videoInfo?id=' + id
		})
	}
	
	onLoad(() => {
		if (!uni.getStorageSync('token')) {
			uni.redirectTo({
				url: '/pages/login/login'
			})
	
			return;
		}
		getPageList();
	})
</script>

<style scoped lang="scss">
	page{
		background: #f5f5f5;
	}
	
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.image{
		width: 140rpx;
		height: 140rpx;
	}
	
	.list-box {
		.image {
			display: block;
			width: 240rpx;
			height: 150rpx;
		}
	
		.button-box {
			display: flex;
			justify-content: flex-end;
		}
	
		.button {
			background-color: #1a8cfe;
			color: #fff;
			padding: 12rpx 40rpx;
		}
	}
</style>